<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="../../css/XitongGuanlicss/xiTong.css">
<link rel="stylesheet" href="../../iconfont/iconfont.css">
<link rel="stylesheet" href="./myicon/iconfont.css">
<script src="../../lib/jquery/jquery-3.6.0.js"></script>

</head>

<body>
    <div id="bianji" class="clear">
        <div id="biaoti" class="clear">
            <span class="iconfont icon-bg-list"></span>
            <span>新增企业数据方案</span>
            <span class="right">为必填项</span>
            <span class="right">*</span>
        </div>
        <hr>

        <div class="clear">
            <div id="zuo" class="left clear">
                <div class="clear">
                    <div class="left"></div>
                    <span class="left">基础信息</span>
                </div>

                <div class="clear">
                    <div>
                        <div>
                            <span>*</span><span>方案ID：</span><input type="text" value="RE001" readonly>
                        </div>
                    </div>
    
                    <div>
                        <div>
                            <span>*</span><span>状态：</span>
                            <select name="" id="">
                                <option value="">启用</option>
                                <option value="">禁用</option>
                            </select>
                        </div>
                    </div>
    
                    <div>
                        <div>
                            <span></span>
                            <div class="left">备注信息：</div>
                            <textarea name="" id="" placeholder=" 请输入备注信息"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div id="you" class="right clear">
                <div class="clear">
                    <div>
                        <div>
                            <span>*</span><span>方案名称：</span><input type="text">
                        </div>
                    </div>

                    <div>
                        <div>
                            <span></span><span>创建人：</span><input type="text">
                        </div>
                    </div>

                    <div>
                        <div>
                            <span>*</span><span>创建时间：</span><input type="text">
                        </div>
                    </div>

                    <div>
                        <div>
                            <span></span><span>更新人：</span><input type="text">
                        </div>
                    </div>

                    <div>
                        <div>
                            <span>*</span><span>更新时间：</span><input type="text">
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div id="xia" class="clear">
            <div id="baocun" class="left">
                <span class="iconfont icon-baocun"></span>
                <span>保存并新增</span>
            </div>

            <div id="chongzhi" class="left">
                <span class="iconfont icon-zhongzhi"></span>
                <span>重置</span>
            </div>
        </div>
    </div>
</body>

<script>
    $('#bianji').css({"background-color":"white","padding-left":"1.3%","border":"1px solid #c1c1c1"});
    $('#bianji #biaoti').css({"height":"70px","line-height":"70px","padding":"0 3% 0 2%"});
    $('#biaoti span:first-child,#biaoti span:nth-child(2)').css({"color":"#666666"});
    $('#biaoti span:nth-child(2)').css({"font-weight":"bold"});
    $('#biaoti span:nth-child(3)').css({"font-size":"12px","color":"#8f949a"});
    $('#biaoti span:nth-child(4)').css({"color":"red","margin-right":"3px"});
    $('#bianji hr').css({"border-top":"1px solid whitesmoke"});
    //基础信息
    $('#bianji #zuo').css({"width":"50%","border-right":"1px solid whitesmoke"});
    $('#bianji #zuo>div:first-child').css({"line-height":"25px","margin":"20px 0 20px 8%"});
    $('#bianji #zuo>div:first-child div').css({"width":"4px","height":"25px","background-color":"#0079fe","margin-right":"9px"});
    $('#bianji #zuo>div:first-child span').css({"color":"#666666","font-size":"14px","font-weight":"bold"});

    $('#bianji #zuo>div:nth-child(2)>div').addClass("clear");
    $('#bianji #zuo>div:nth-child(2)>div>div').addClass("right clear");
    $('#bianji #zuo>div:nth-child(2)>div>div').css({"margin":"5px 6% 25px 0"});
    $('#zuo>div:nth-child(2)>div div span:first-child').css({"color":"red","margin-right":"3px"});
    $('#zuo>div:nth-child(2)>div div span:nth-child(2)').css({"color":"#666667","font-size":"14px","margin-right":"15px"});
    //input框
    $('#zuo>div:nth-child(2)>div input,#zuo>div:nth-child(2)>div select').css({"width":"380px","border":"1px solid #c1c1c1","border-radius":"5px"});
    $('#zuo>div:nth-child(2)>div:first-child div input').css({"height":"40px","background-color":"#cccccc"});
    $('#zuo>div:nth-child(2)>div select').css({"height":"40px","color":"grey"});
    $('#zuo>div:nth-child(2)>div:nth-child(3) div textarea').css({"height":"150px","width":"380px","font-size":"15px","border":"1px solid #c1c1c1","border-radius":"5px"});
    $('#zuo>div:nth-child(2)>div:nth-child(3) div div').css({"color":"#666667","font-size":"14px","margin":"10px 15px 0 0"});

    $('#bianji #you').css({"width":"49.8%","border-left":"1px solid whitesmoke"});
    $('#bianji #you>div>div').addClass("clear");
    $('#bianji #you>div>div>div').addClass("right clear");
    $('#bianji #you>div').css({"margin-top":"65px"});
    $('#bianji #you>div>div>div').css({"margin":"5px 6% 25px 0"});
    $('#you>div>div div span:first-child').css({"color":"red","margin-right ":"3px"});
    $('#you>div>div div span:nth-child(2)').css({"color":"#666667","font-size":"14px","margin-right":"15px"});

    $('#you>div>div input').css({"height":"40px","width":"380px","border":"1px solid #c1c1c1","border-radius":"5px"});
    $('#you>div>div:not(:first-child) input').css({"background-color":"#cccccc"});

    //按钮
    $('#bianji #xia').css({"margin":"50px 0 30px 30%"});
    $('#bianji #xia div').css({"height":"35px","line-height":"35px","width":"150px","text-align":"center","margin-right":"20px","border":"1px solid #0079fe","border-radius":"4px"});
    $('#bianji #xia div span:nth-child(2)').css({"font-size":"15px"});   
    $('#bianji #xia #baocun').css({"background-color":"#0079fe"});
    $('#bianji #xia #baocun span:first-child').css({"font-size":"18px","color":"#0079fe"});
    $('#bianji #xia #baocun span:nth-child(2)').css({"color":"white"});
    $('#bianji #xia #chongzhi').css({"color":"#0079fe"});
    $('#bianji #xia #chongzhi span:first-child').css({"font-size":"17px"});
</script>
</html>